<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>一个重要的构造关系</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="root">
    <school></school>
  </div>

  <script>
    Vue.config.productionTip = false
    Vue.prototype.x = 99

    const school = Vue.extend({
      template: `
        <div>
          <h2>学校名称：{{name}}</h2>
          <h2>学校地址：{{address}}</h2>
          <button @click="showX">显示x</button>
        </div>
      `,
      data() {
        return {
          name: '尚硅谷',
          address: '北京'
        }
      },
      methods: {
        showX() {
          console.log(this.x)
          console.log(this.__proto__.__proto__ === vm.__proto__)
        }
      }
    })

    const vm = new Vue({
      el: '#root',
      data: {
        msg: '你好'
      },
      components: {
        school
      }
    })

    console.log(school.prototype.__proto__ === vm.__proto__)

    /* // 定义一个构造函数
    function Demo() {
      this.a = 1
      this.b = 2
    }

    // 创建一个Demo的实例对象
    const d = new Demo()

    console.log(Demo.prototype) // 显示原型属性

    console.log(d.__proto__) // 隐式原型属性

    console.log(Demo.prototype === d.__proto__) // true

    // 通过显示原型属性操作原型对象，追加一个x属性
    Demo.prototype.x = 99

    console.log(d.__proto__.x)

    // 隐式原型链
    console.log(d.x) */
  </script>
</body>

</html>